<template>
  <a-card size="small" class="info-card" :bordered="false" :hoverable="true">
    <div class="title">
      <div class="text">{{ infoData.name }}</div>
      <div class="button" v-if="infoData.type === 'box'" @click="boxDetail">进入数据服务</div>
    </div>
    <div class="list">
      <div class="item" v-for="item in options" :key="item.prop">
        <div class="label">{{ item.label }}:</div>
        <div class="span">{{ infoData[item.prop] }} {{ item.util }}</div>
      </div>
    </div>
  </a-card>
</template>

<script setup>
  import { ref, onMounted, onUnmounted, watch, nextTick, h } from 'vue';
  const emit = defineEmits(['detail']);

  const baseOptions = [
    {
      label: '数据交换平台',
      prop: 'name',
    },
    {
      label: '中台版本',
      prop: 'version',
    },
    {
      label: '接入通道量',
      prop: 'box',
    },
    {
      label: '接入设备量',
      prop: 'device',
    },
  ];

  const boxOptions = [
    {
      label: '数据通道编号',
      prop: 'boxCode',
    },
    {
      label: '服务IP地址',
      prop: 'ipAddress',
    },
    {
      label: '通信端口',
      prop: 'port',
    },
    {
      label: '安装位置描述',
      prop: 'location',
    },
    {
      label: '心跳间隔',
      prop: 'heartbeatInterval',
      util: '秒',
    },
    {
      label: '状态',
      prop: 'isDisable',
    },
  ];

  const deviceOptions = [
    {
      label: '设备编号',
      prop: 'deviceCode',
    },
    {
      label: '设备名称',
      prop: 'deviceName',
    },
    {
      label: '连接方式',
      prop: 'connectType',
    },
    {
      label: '安装位置描述',
      prop: 'installPosition',
    },
  ];

  const options = ref(baseOptions);

  const infoData = ref({
    name: '',
  });

  function boxDetail() {
    emit('detail', infoData.value);
  }

  function open(row) {
    const opAttr = {
      center: baseOptions,
      box: boxOptions,
      device: deviceOptions,
    };
    options.value = opAttr[row.type];
    infoData.value = row;
  }

  defineExpose({
    open,
  });
</script>

<style scoped lang="less">
  .info-card {
    width: 100%;
    height: 524px;
    .title {
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .text {
        font-size: 20px;
        font-weight: 700;
      }
      .button {
        color: #34c38f;
        cursor: pointer;
        &:hover {
          font-weight: 700;
        }
      }
    }
    .list {
      .item {
        font-size: 16px;
        display: flex;
        margin-bottom: 15px;
        .label {
          margin-right: 10px;
          color: #000;
          width: 120px;
          text-align: right;
        }
        .span {
          color: #333;
          font-weight: 700;
        }
      }
    }
  }
</style>
